{% extends "account/account_base.html" %}
{% block title %}组织架构{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
{% endblock %}
{% block page_content %}

{{ super() }}

<div class="col-md-12">
    <button type="button" style="margin-left:15px" class="btn btn-success" data-target="#AddStaffModal" data-toggle="modal">添加人员</button>
    <div class="panel-body" style="padding-bottom:0px;">
	<ul id="myTab" class="nav nav-tabs">
            <li class="active">
		<a href="#service" data-toggle="tab" onclick="selected_table='service'" >客服部</a>
   	    </li>
            <li>
		<a href="#review" data-toggle="tab" onclick="selected_table='review'" >车辆审批部</a>
	    </li>
            <li>
		<a href="#manage" data-toggle="tab" onclick="selected_table='manage'" >综合管理部</a>
	    </li>
            <li>
		<a href="#finance" data-toggle="tab" onclick="selected_table='finance'" >财务部</a>
	    </li>
            <li>
		<a href="#hr" data-toggle="tab" onclick="selected_table='hr'" >人资行政部</a>
	    </li>
            <li>
		<a href="#admin" data-toggle="tab" onclick="selected_table='admin'" >管理层</a>
	    </li>
        </ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="service"> 
	    	 <table id="tb_service" data-use-row-attr-func="true" data-reorderable-rows="true" ></table>
	    </div>
	    <div class="tab-pane fade" id="review"> 
	    	 <table id="tb_review"></table>
	    </div>
	    <div class="tab-pane fade" id="manage"> 
	    	 <table id="tb_manage"></table>
	    </div>
	    <div class="tab-pane fade" id="finance"> 
	    	 <table id="tb_finance"></table>
	    </div>
	    <div class="tab-pane fade" id="hr"> 
	    	 <table id="tb_hr"></table>
	    </div>
	    <div class="tab-pane fade" id="admin"> 
	    	 <table id="tb_admin"></table>
	    </div>
	</div>
    </div>
</div>

<div class="modal fade" id="AddStaffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加人员</h4>
            </div>
            <div class="modal-body">
		<form role="form" id="AddForm" >
		     <div class="form-group">
			  <label for="staff_number">工号</label>
    			  <input type="text" class="form-control" id="staff_number" name="staff_number" autocomplete="off" required>
 		     </div>
		     <div class="form-group">
			  <label for="name">姓名</label>
    			  <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name" autocomplete="off" required>
 		     </div>
		     <div class="form-group">
			  <label for="phone">手机</label>
    			  <input type="text" class="form-control" id="phone" placeholder="请输入手机号" name="phone" autocomplete="off" required>
 		     </div>
		     <div class="form-group">
			  <label for="department">部门</label>
    			  <select class="form-control" id="department" name="department" required>
      				<option value="service" >客服部</option>
      				<option value="review" >车辆审批部</option>
     				<option value="manage" >综合管理部</option>
			        <option value="hr" >人资行政部</option>
      				<option value="admin" >管理层</option>
      				<option value="finance" >财务部</option>
    			  </select>	
 		     </div>
    	     <button type="button" class="btn btn-default" onclick="add_submit()" >保存</button>
	        </form> 
	    </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="EditStaffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">编辑人员</h4>
            </div>
            <div class="modal-body">
		<form role="form" id="EditForm" >
		     <div class="form-group">
			  <label for="staff_number">工号</label>
    			  <input type="text" class="form-control" id="staff_number" name="staff_number" required>
 		     </div>
		     <div class="form-group">
			  <label for="name">姓名</label>
    			  <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name" required>
 		     </div>
		     <div class="form-group">
			  <label for="phone">手机</label>
    			  <input type="text" class="form-control" id="phone" placeholder="请输入手机号" name="phone" required>
 		     </div>
		     <div class="form-group">
			  <label for="department">部门</label>
    			  <select class="form-control" id="department" name="department" required>
      				<option value="service">客服部</option>
      				<option value="review">车辆审批部</option>
     				<option value="manage">综合管理部</option>
			        <option value="hr">人资行政部</option>
      				<option value="admin">管理层</option>
      				<option value="finance">财务部</option>
    			  </select>	
 		     </div>
		     <div class="form-group">
		            <input type="hidden" id="old_number" name="old_number">
  		     </div>
  	    	     <button type="button" class="btn btn-default" onclick="edit_submit()" >保存</button>
	        </form> 
	    </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script>
$(function () {

    //初始化Table
    var table_service = new TableInit("tb_service");
    table_service.Init();
    var table_review = new TableInit("tb_review");
    table_review.Init();
    var table_manage = new TableInit("tb_manage");
    table_manage.Init();
    var table_finance = new TableInit("tb_finance");
    table_finance.Init();
    var table_hr = new TableInit("tb_hr");
    table_hr.Init();
    var table_admin = new TableInit("tb_admin");
    table_admin.Init();

});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    oTableInit.Init = function () {
    
	ids = ["tb_service", "tb_review", "tb_manage", "tb_finance", "tb_hr", "tb_admin"];
	urls = ["/account/org/get_list/service/", "/account/org/get_list/review/", "/account/org/get_list/manage/", "/account/org/get_list/finance/",
	    "/account/org/get_list/hr/", "/account/org/get_list/admin/"];
   	 //初始化Table
   	table = document.getElementById(table_id);
   	index = ids.indexOf(table_id);
   	url = urls[index];
	
        $(table).bootstrapTable({
            url: url,  //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            pagination: true,                   //是否显示分页（*）
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            clickToSelect: true,                //是否启用点击选中行
            columns: [{
		field: 'staff_number',
		title: '工号',
		align: 'center',
	    },{
                field: 'phone',
                title: '手机号',
		align: 'center',
            }, {
                field: 'name',
                title: '姓名',
		align: 'center',
            }, {
                field: 'state',
                title: '状态',
		align: 'center',
            }, {
                field: 'created',
                title: '创建时间',
		align: 'center',
            }, {
                field: 'role',
		visible: false,
            },{
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter,
            },]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            number: $("#number").val(),
            start: $("#start").val(),
	    end: $("#end").val(),
	    submitter: $("#submitter").val(),
	    area: $("#area").val(),
            search_type: $("#search_type").val(),
        };
        return temp;
    };
    return oTableInit;
};

function operateFormatter(value, row, index) {
	var operate = value===0 ? '禁用' : '启用';
        return [
            '<a class="edit" href="#" title="编辑信息">编辑</a>',
	    '|',
            '<a class="reset" href="#" title="重置为默认密码">重置密码</a>',
	    '|',
            '<a class="reverse" href="#" title="修改账户状态">' + operate + '</a>',
        ].join('');
};

window.operateEvents = {
        'click .edit': function (e, value, row, index) {
        	form = document.getElementById("EditForm");
		form.staff_number.value = row.staff_number;
		form.name.value = row.name;
		form.phone.value = row.phone;
		form.department.value = row.role;
		form.old_number.value = row.staff_number;
		$("#EditStaffModal").modal();
	},
        'click .reset': function (e, value, row, index) {
		refresh = false;
        	$.ajax({
	            url: "/account/org/reset/",
        	    data: {"staff_number": row.staff_number},
	            type: "POST",
        	    dataType:"text",
	            success: function(data) {
        	        json = eval("("+data+")");
			state = json.state;
        	        if(json.state === 0){
			    $('#msg_icon').removeAttr('class');
			    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
			    $("#msg").html("重置成功！");
	                }
			else{
			    $('#msg_icon').removeAttr('class');
			    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  			    $('#msg').html("重置失败，" + json.msg);
			}
			$('#MsgModal').modal();
	            },
		    error: state = -1,
	        });    
		return;
        },
        'click .reverse': function (e, value, row, index) {
		refresh = true;
		div = document.getElementById("msg");
        	$.ajax({
	            url: "/account/org/reverse/",
        	    data: {"staff_number": row.staff_number},
	            type: "POST",
        	    dataType:"text",
	            success: function(data) {
        	        json = eval("("+data+")");
			state = json.state;
        	        if(json.state === 0){
			    $('#msg_icon').removeAttr('class');
			    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
			    $("#msg").html("操作成功！");
	                }
			else{
			    $('#msg_icon').removeAttr('class');
			    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  			    $('#msg').html("操作失败，" + json.msg);
			}
			$('#MsgModal').modal();
	            },
		    error: state = -1,
	        });    
        }
	
};
</script>
<script>
var state = -1;
var refresh = false;
var selected_table = "service";
var add_submit = function(){
	refresh = true;
        $.ajax({
            url: "/account/org/add_staff/",
            data: $("#AddForm").serialize(),
            type: "POST",
            dataType:"text",
            success: function(data) {
		json = eval("("+data+")");
		state = json.state;
       	        if(json.state === 0){
			$('#msg_icon').removeAttr('class');
			$('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
			$("#msg").html("添加成功！");
			$('#AddStaffModal').modal('hide');
			document.getElementById('AddForm').reset();
		}
		else{
			$('#msg_icon').removeAttr('class');
			$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
			$('#msg').html("添加失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		state = -1;
		$('#msg_icon').removeAttr('class');
		$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		$('#msg').html("添加失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

var edit_submit = function(){
	refresh = true;
        $.ajax({
            url: "/account/org/edit_staff/",
            data: $("#EditForm").serialize(),
            type: "POST",
            dataType:"text",
            success: function(data) {

                json = eval("("+data+")");
		state = json.state;
                if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    $("#msg").html("修改成功！");
                    $('#EditStaffModal').modal('hide');
                }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("修改失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		state = -1;
		$('#msg_icon').removeAttr('class');
		$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		$('#msg').html("修改失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

$(document).ready(function(){

	$('#MsgModal').on('hidden.bs.modal', function () {
		if(state === 0 && refresh){
			$('#tb_'+selected_table).bootstrapTable('refresh', {'silent': true})
		}
	});
});

</script>
<script>
$("#nav_staff").attr("class", "active");
</script>
{% endblock %}

